<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- <div class="box">111</div>
    <div class="box" id="myids">222</div>
    <div id="myid">我是div</div> -->
    <div>张三</div>
    <button>点我</button>
    <script>
      //获取一个元素: 通过css选择器
      //注意:只能获取一个元素,即使有多个也只获取第一个元素
      // var ele = document.querySelector(".box");
      // console.log(ele);

      // var ele = document.querySelector("#myid");
      // console.log(ele);

      //获取多个元素 : 通过css选择器
      // var ele = document.querySelectorAll("div");
      // console.log(ele);

      // var ele = document.querySelectorAll("#myid");
      // console.log(ele);

      // var ele = document.querySelectorAll("div");
      // console.log(ele);

      //三.处理伪数组,把伪数组转换成数组
      //   function fn() {
      //     console.log(arguments); //隐藏参数,会把所有的参数都放在arguments伪数组里面,处理不定参问题
      //     console.log([]);
      //   }
      //   fn(1, 2, 3);

      //1.通过...:展开运算符
      //   var ele = document.querySelectorAll(".box");
      //   console.log(ele);
      //   var arr = [...ele];//把伪数组转成数组
      //   console.log(arr);

      //2.通过var arr = Array.from(伪数组)方法;
      //   var ele = document.querySelectorAll(".box");
      //   console.log(ele); //伪数组
      //   var arr = Array.from(ele); //数组
      //   console.log(arr);

      //四.元素的类型
      // var ele = document.querySelector(".box");
      // console.log(ele);
      // console.log(typeof ele);
      // console.dir(ele);
      // ele.name = "嘻嘻";

      // function fn() {
      //   console.log(111);
      // }
      // console.log(fn);
      // console.dir(fn);

      /*
      总结:
      一:获取元素的2种方式
      1.获取一个元素: querySelector
      2.获取所有元素: querySelectorAll

      二.把伪数组转换成数组
      1. ...
      2.Array.from();

      三.元素是一个对象类型,可以当成对象来使用
      */
    </script>
  </body>
</html>
